<template>
    <section>
        <DetailsHeader title="出租记录" class="mb-24" :showBack="false" />

        <div class="page-content">
            <div class="search-content">
                <a-select ref="select" v-model:value="form.fee" placeholder="全部计费方式" allowClear style="width: 180px"
                    class="icon-select netSpeed mr-16" @change="getList">
                    <a-select-option value="payg">按量计费</a-select-option>
                    <a-select-option value="monthly">包月</a-select-option>
                    <a-select-option value="weekly">包周</a-select-option>
                    <a-select-option value="daily">包天</a-select-option>
                    <a-select-option value="bidding">竞价计费</a-select-option>
                </a-select>

                <a-date-picker v-model:value="form.date" picker="month" class="mr-16" @change="getList" />

                <div class="opt">
                    <svg-icon @click="downFile" name="icon_down" class="mr-8" style="width: 24px;height: 24px;" />
                    <a-input-search v-model:value="form.machineId" placeholder="请输入机器ID"
                        style="width: 200px;margin-left: auto;" @search="getList" />
                </div>
            </div>

            <a-table :dataSource="tableList" :pagination="false">
                <a-table-column key="orderId" title="出租单号" data-index="orderId" />
                <a-table-column key="machineId" title="机器ID" data-index="machineId" />
                <a-table-column key="skuName" title="计费类型" data-index="skuName">
                    <template #default="{ record }">
                        {{ payType[record.skuName] }}
                    </template>
                </a-table-column>

                <a-table-column key="phone" title="出租时段" data-index="">
                    <template #default="{ record }">
                        {{ record.startTime }}~{{ record.closeTime }}
                    </template>
                </a-table-column>
                <a-table-column key="price" title="单价（元）" data-index="price" />
                <a-table-column key="gpuNum" title="GPU数" data-index="gpuNum" />
                <a-table-column key="originAmount" title="订单金额（元）" data-index="originAmount" />
                <a-table-column key="voucherAmount" title="代金券支付（元）" data-index="voucherAmount" />
                <a-table-column key="balanceAmount" title="实际支付（元）" data-index="balanceAmount" />
                <a-table-column key="platformCommission" title="平台服务费" data-index="platformCommission" />
            </a-table>

            <pagination v-show="total > 0" :total="total" v-model:page="form.pn" v-model:limit="form.ps"
                @pagination="getList" />
        </div>

    </section>
</template>

<script setup name="Machine">
import { ref } from 'vue'
import { download } from '@/libs/util.common'
import { getSaleListApi } from 'api/modules/api.rentalRecords'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import dayjs from 'dayjs';

const payType = {
    'card_less': '按量付费',
    'free': '按量付费',
    'payg': '按量付费',
    'bidding': '竞价实例',
    'daily': '包天',
    'weekly': '包周',
    'monthly': '包月',
}

const form = ref({
    pn:1,
    ps:10,
    date: dayjs()
})
// 获取列表
const tableList = ref([])
const total = ref(0)
const getList = () => {
    const params = {
        ...form.value,
        date: dayjs(form.value.date).format('YYYY-MM')
    }
    getSaleListApi(params).then(res => {
        tableList.value = res.data.list || []
        total.value = res.data.total
    })
};

getList()

// 下载出租记录
const downFile = () => {
    const params = {
        ...form.value,
        export: true,
        date: dayjs(form.value.date).format('YYYY-MM')
    }
    download('/api/v1/provider/salelist', params, '')
}

</script>

<style scoped lang="scss">
.page-content {
    background: #fff;
    padding: 24px;
}

.search-content {
    display: flex;
    margin-bottom: 24px;

    .opt {
        margin-left: auto;
    }
}
</style>
